<template>
	<div class="time-capsule">
		<div class="title">
			<hourglass-full theme="two-tone" size="24" :fill="['#efefef', '#00000020']" />
			<span>时光胶囊</span>
		</div>
		<span class="text">今日已经度过了&nbsp;{{ timeData.day.start }}&nbsp;小时</span>
		<el-progress :text-inside="true" :stroke-width="20" :percentage="timeData.day.pass" />
		<span class="text">本周已经度过了&nbsp;{{ timeData.week.start }}&nbsp;天</span>
		<el-progress :text-inside="true" :stroke-width="20" :percentage="timeData.week.pass" />
		<span class="text">本月已经度过了&nbsp;{{ timeData.month.start }}&nbsp;天</span>
		<el-progress :text-inside="true" :stroke-width="20" :percentage="timeData.month.pass" />
		<span class="text">今年已经度过了&nbsp;{{ timeData.year.start }}&nbsp;个月</span>
		<el-progress :text-inside="true" :stroke-width="20" :percentage="timeData.year.pass" />
		<div v-if="startDateText && globalStore.homeView.siteStartShow">
			<span class="text" v-html="startDateText" />
			<!-- <el-progress
        :show-text="false"
        :indeterminate="true"
        :stroke-width="6"
        :percentage="80"
        :duration="2"
      /> -->
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from "vue";
import { getTimeCapsule, siteDateStatistics } from "@/utils/util";
import { GlobalStore } from "@/stores";
const globalStore = GlobalStore();

// 进度条数据
let timeData = ref(getTimeCapsule());
let startDate = ref(import.meta.env.VITE_SITE_START);
let startDateText = ref("");
let timeInterval: NodeJS.Timer | null = null;

onMounted(() => {
	timeInterval = setInterval(() => {
		timeData.value = getTimeCapsule();
		if (startDate.value) startDateText.value = siteDateStatistics(new Date(startDate.value));
	}, 1000);
});

onBeforeUnmount(() => {
	clearInterval(Number(timeInterval));
});
</script>

<style lang="scss" scoped>
.time-capsule {
	width: 100%;
	.title {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0.2rem 0 1.5rem;
		font-size: 1.1rem;
		.i-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 6px;
		}
	}
	.text {
		display: block;
		margin: 1rem 0 0.5rem;
		font-size: 0.95rem;
	}
}
</style>
